
@extends('layouts._main')

@section('title','我的卡券')

@section('css')
    <link rel="stylesheet" href="{{ asset('/css/card.css') }}">
    <style>
        /*#d79705;渐变色调浅色：#dec07a*/
        body{
            background-color: #ECECEC;
        }
        .body{
            font-size: 14px;
        }
        .weui-navbar {
            position: initial;
        }
        .weui-navbar__item:after {
            border-right: none;
        }
        .weui-navbar:after {
            border-bottom: none;
        }
        .weui-tab__panel{
            display: none;
        }
        .weui-navbar__item.weui-bar__item_on {
            border-bottom:2px solid #D58B00;
            background-color: #fff;
        }
        .weui-navbar {
            box-sizing: border-box;
            background-color: #fff;
            padding: 0 15px;
            border-bottom: 1px solid #ddd;
        }
        .weui-navbar+.weui-tab__panel {
            padding-top: 0px;
            padding-bottom: 0;
        }
        .input_div>input{
            width: 100%;
            border: none;
            border-bottom: 1px solid #ddd;
        }
        .weui-navbar__item {
            padding: 7px 0;
        }
        .nav_bar{
            background-color: #fff;
            padding: 10px 15px;
            text-align: center;
            border-bottom: 1px solid #D0D0D0;
            position: relative;
        }
        .nav_bar>.nav_back {
            background: url('/images/version1/icon_bar_back.png') no-repeat;
            background-size: 20px 20px;
            position: absolute;
            left: 10px;
            top: 12px;
        }
        .page{
            margin-top: 1px;
        }
        .top>p{
            color: #fff;
        }
        .top>p:nth-child(2){
            font-size: 45px;
        }
        .item{
            padding: 10px 15px;
            box-sizing: border-box;
            background: #fff;
            margin-bottom: 5px;
        }
        .item img{
            margin-right: 15px;
        }
        .item p{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .page{
            margin-top: 1px;
        }
        .excharge_record{
            color: #d79705;
            font-size: 12px;
            float: right;
        }

        .item_right{
            display: inline-block;
        }

        .item_right{
            width: 70%;
        }
        .title{
            font-size: 16px;
            padding: 10px 0px;
        }
        .recharge_cash{
            text-align: center;
            margin-top: 20px;
        }
        .need_credits{
            color: #E5B23A;
            font-size: 16px;
        }

        .input_div>input{
            width: 100%;
            border: none;
            border-bottom: 1px solid #ddd;
        }


        .weui-navbar__item {
            padding: 7px 0;
        }

    </style>
@endsection

@section('container')
    <div class="body">
        <div class="nav_bar" style="color:#d79705;">
            <div class="nav_back"></div>
            <span>我的卡券</span>
            {{--<a class="excharge_record" href="{{ route('oGiftRecord') }}">绑卡记录</a>--}}
        </div>
        <div class="page navbar js_show">
            <div class="page__bd" style="height: 100%;">
                <div class="weui-tab">
                    <div class="weui-navbar">
                        {{--tap--}}
                        <div class="weui-navbar__item weui-bar__item_on" data-id="can_use">
                            未使用
                        </div>

                        <div class="weui-navbar__item" data-id="already_use">
                            已使用
                        </div>

                        <div class="weui-navbar__item" data-id="overdue">
                            已过期
                        </div>
                    </div>

                    {{--未使用--}}
                    <div class="weui-tab__panel" id="can_use" style="display: block">

                        @if(isset($datas[1]) && !empty($datas[1]))
                            @foreach($datas[1] as $item)
                                <div class="item">

                                    <img src="{{ asset('/images/version1/bgk_kfc.png') }}" width="60" height="60" alt="">

                                    <div class="item_right">

                                        <p class="title">{{ $item['merchant_ticket']['name'] }}</p>
                                        <p class="desc">领取时间：{{ $item['created_at'] }}</p>

                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="weui-loadmore weui-loadmore_line empty" >
                                <span class="weui-loadmore__tips">到底了:(</span>
                            </div>
                        @endif

                    </div>

                    {{--已使用--}}
                    <div class="weui-tab__panel " id="already_use">
                        @if(isset($datas[2]) && !empty($datas[2]))
                            @foreach($datas[2] as $item)
                                <div class="item">

                                    <img src="{{ asset('/images/version1/bgk_kfc.png') }}" width="60" height="60" alt="">

                                    <div class="item_right">

                                        <p class="title">{{ $item['merchant_ticket']['name'] }}</p>
                                        <p class="desc">使用时间：{{ $item['used_at'] }}</p>


                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="weui-loadmore weui-loadmore_line empty" >
                                <span class="weui-loadmore__tips">到底了:(</span>
                            </div>
                        @endif
                    </div>

                    {{--已过期--}}
                    <div class="weui-tab__panel " id="overdue">
                        @if(isset($datas[3]) && !empty($datas[3]))
                            @foreach($datas[3] as $item)
                                <div class="item">

                                    <img src="{{ asset('/images/version1/bgk_kfc.png') }}" width="60" height="60" alt="">

                                    <div class="item_right">

                                        <p class="title">{{ $item['merchant_ticket']['name'] }}</p>
                                        <p class="desc">过期时间：{{ $item['overdued_at'] }}</p>

                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="weui-loadmore weui-loadmore_line empty" >
                                <span class="weui-loadmore__tips">到底了:(</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')

    <script type="text/javascript" class="navbar js_show">
        //tap切换
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            var id = $(this).data('id');
            $('.weui-tab__panel').hide();
            $('#'+id).show();
            $('.bind_card').css('height',$('.bind_card').width()*1*0.5+12+'px');
        });
    </script>
@endsection

